<template>
  <div v-loading="loginLding" class="loginbackg">
    <transition name="fade">
      <!-- 登录模块视图 -->
      <div class="regisBox" v-if="showRegi">
        <h2>登录</h2>
        <form>
          <div class="inputBox">
            <input v-model="logins.tel" type="tel" name="" required="" />
            <label ref="suTel">请输入手机号码</label>
          </div>
          <div class="inputBox">
            <input
              v-model="logins.password"
              type="password"
              name=""
              required=""
            />
            <label ref="suPassword">请输入密码</label>
          </div>
          <button @click="loging">登录</button>
          <el-link class="float-right" @click="showRegis" :underline="false"
            >注册
          </el-link>
        </form>
      </div>
      <!-- 注册模块视图 -->
      <div class="regisBox" v-else>
        <h2>注册</h2>
        <form>
          <div class="inputBox">
            <input v-model="resgister.tel" type="tel" name="" required="" />
            <label ref="suTel">请输入手机号码</label>
          </div>
          <div class="inputBox">
            <input
              v-model="resgister.password"
              type="password"
              name=""
              required=""
            />
            <label ref="suPassword">请输入密码</label>
          </div>
          <div class="inputBox">
            <input
              v-model="resgister.passwords"
              type="password"
              name=""
              required=""
            />
            <label
              ref="suPasswords"
              :class="
                resgister.password != resgister.passwords ? 'text-red' : ''
              "
              >{{
                resgister.password != resgister.passwords
                  ? "两次密码不匹配"
                  : "请重复密码"
              }}</label
            >
          </div>
          <!-- <input type="submit" name="" value="Submit" /> -->
          <button @click="register">注册</button>
          <el-link class="float-right" @click="showRegis" :underline="false"
            >登录
          </el-link>
        </form>
      </div>
    </transition>
  </div>
</template>

<script>
// 登录接口 login
import login from "../utils/login";
import business from "@/utils/business";
export default {
  data() {
    return {
      // 注册初始化内容
      resgister: {
        tel: "",
        password: "",
        passwords: "",
      },
      // 登录初始化内容
      logins: {
        tel: "13657799294",
        password: "123456ads",
      },
      //消息提示
      Tips: {
        Text: null,
        Type: null,
      },
      // 登录注册切换
      showRegi: true,
      // 加载服务
      loginLding: false,
    };
  },
  mounted() {},
  watch: {},
  methods: {
    // 注册
    register() {
      let pho_let =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //检验手机号码
      let pas_let = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,20}$/; //校验密码
      var username = this.resgister.tel;
      var password = this.resgister.password;
      if (username == "" || password == "" || this.resgister.passwords == "") {
        this.Tips.Text = "不能为空";
        this.Tips.Type = "warning";
        this.TipsMsg();
      } else {
        if (!pho_let.test(username)) {
          this.Tips.Text = "手机输入有误";
          this.Tips.Type = "warning";
          this.TipsMsg();
        } else {
          if (!pas_let.test(password) || password != this.resgister.passwords) {
            this.Tips.Text = "密码太弱了";
            this.Tips.Type = "warning";
            this.TipsMsg();
          } else {
            login
              .register({ username, password })
              .then((res) => {
                if (res.msg == "该号码以注册过") {
                  this.Tips.Type = "warning";
                } else if (res.msg == "注册成功") {
                  this.Tips.Type = "success";
                }
                this.Tips.Text = res.msg;
                this.TipsMsg();
              })
              .catch((res) => {
                this.Tips = { Text: res.msg, Type: "warning" };
                this.TipsMsg();
              });
          }
        }
      }
    },
    // 登录
    loging() {
      let _this = this;
      let pho_let =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //检验手机号码
      var username = this.logins.tel;
      var password = this.logins.password;
      if (username == "" || password == "") {
        this.Tips = { Text: "不能为空", Type: "warning" };
        this.TipsMsg();
      } else {
        if (!pho_let.test(username)) {
          this.Tips = { Text: "手机输入有误", Type: "warning" };
          this.TipsMsg();
        } else {
          login
            .login({ username, password })
            .then((res) => {
              if (res.data != null) {
                this.Tips = { Text: "登录成功", Type: "success" };
                this.TipsMsg();
                this.$store.commit("$_setStorage", res.data.data);
                business
                  .showsetSeller()
                  .then((res) => {
                    let data = res.data.data;
                    if (data.length > 0) {
                      setTimeout(() => {
                        location.reload();
                        this.$router.push({ name: "/" });
                      }, 1500);
                    }else{
                      this.$message.warning("尚未添加信息")
                       setTimeout(() => {
                        this.$router.push({ path: "/Seller/setSeller" });
                        location.reload();
                      }, 1500);
                    }
                  })
                  .catch((error) => {
                    console.log("查询错误:", error);
                  });
              } else {
                this.Tips = { Text: res.msg, Type: "warning" };
                this.TipsMsg();
              }
            })
            .catch((res) => {
              this.Tips = { Text: res.msg, Type: "warning" };
              this.TipsMsg();
            });
        }
      }
    },
    /* 提示 */
    TipsMsg() {
      this.$message({
        message: this.Tips.Text,
        type: this.Tips.Type,
      });
    },
    // 切换登录注册
    showRegis() {
      this.showRegi = this.showRegi === true ? false : true;
    },
  },
};
</script>

<style lang="less">
@import "../assets/css/register.less";
</style>
